<template>
    <div class="card">
        <div class="cover">
            <a :href="link ? link : '#'">
                <img class="image"
                    :src="url ? url : 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'" />
                <span class="name">
                    <n-performant-ellipsis style="max-width: 232px">
                        {{ name }}
                    </n-performant-ellipsis>
                </span>
            </a>
        </div>
    </div>
</template>

<script setup>
import { NPerformantEllipsis } from 'naive-ui';

const props = defineProps(['link', 'url', 'name']);
</script>

<style scoped>
.card {
    float: left;
    width: 242px;
    height: 342px;
    border: 1px solid #ddd;
}

.card:hover {
    box-shadow: 1px 1px 6px #ddd;
}

.cover {
    float: left;
    z-index: 100;
    width: 240px;
    height: 340px;
    border-radius: 4px;
    text-align: center;
    background-color: #fff;
}

.image {
    width: 238px;
    height: 300px;
}

.name {
    padding: 4px;
}
</style>